<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>
  <div id="app">
    <counter></counter>
    <counter></counter>
    <counter></counter>
    <button @click="inc">increment</button>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    function createStore({ state, mutations }) {
      return new Vue({
        data: { state },
        methods: {
          commit(mutationName) {
            mutations[mutationName](state);
          }
        }
      });
    }

    const store = createStore({
      state: { count: 0 },
      mutations: {
        inc(state) {
          state.count++;
        }
      }
    });

    const Counter = {
      render: h => h('div', store.state.count)
    };

    new Vue({
      el: '#app',
      components: { Counter },
      methods: {
        inc() {
          store.commit('inc');
        }
      }
    });
  </script>
</body>
</html>
